<template>
<div class="management-merchant-add views-container">
    <div class="wlm-form">
        <!-- <div class="wlm-form-header">活动信息</div> -->
        <el-menu style="margin:0 0 10px 10px;" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">基本信息</el-menu-item>
            <el-menu-item index="2">联系商家</el-menu-item>
            <el-menu-item index="3">结算费率</el-menu-item>
        </el-menu>
        <div class="wlm-form-content" v-show="tabset.basic">
            <div class="wlm-dialog-main">
                <div class="wlm-dialog-content">
                    <el-form ref="userForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                        <el-form-item label="商家名称" prop="name">
                            <el-input v-model.trim="formFormatData.formData.name" :maxlength="30">
                              <template slot="append">{{formFormatData.formData.name.length}}/30</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="商家简介" prop="describe">
                            <el-input v-model="formFormatData.formData.describe" maxlength="230">
                              <template slot="append">{{formFormatData.formData.describe.length}}/230</template>
                            </el-input>
                            <div class="form-help">一句话介绍商家</div>
                        </el-form-item>
                        <el-form-item label="商家LOGO" prop="merchantlog" ref="merchantlog">
                            <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                            <div class="form-help">建议尺寸400*400</div>
                        </el-form-item>
                        <el-form-item label="商家背景图" prop="businessbackgroundmap" ref="businessbackgroundmap">
                            <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                            <div class="form-help">建议尺寸1280*840</div>
                        </el-form-item>
                        <el-form-item label="商家资质">
                            <choose-files ref="chooseFiles" :config="choosePlatformConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="wlm-form-content" v-show="tabset.conditions">
            <div class="wlm-dialog-main">
                <div class="wlm-dialog-content">
                    <el-form ref="userForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                        <el-form-item label="联系人">
                            <el-input v-model.trim="formFormatData.formData.contacts">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model.trim="formFormatData.formData.telephone">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="微信">
                            <el-input v-model.trim="formFormatData.formData.wechat">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input v-model.trim="formFormatData.formData.address">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="wlm-form-content" v-show="tabset.commission">
            <div class="wlm-dialog-main">
                <div class="wlm-dialog-content">
                    <el-form ref="userForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                        <el-form-item label="商家结算费率">
                            <el-radio-group v-model="formFormatData.formData.business_settlement">
                                <el-radio :label="1">按平台默认比例</el-radio>
                                <el-radio :label="2">自定义结算比例</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="费率" v-if="formFormatData.formData.business_settlement=='2'">
                            <el-input placeholder="请输入默认结算费率" @blur="notZero(formFormatData.formData,'settlement')" @input.native="clearNativeReg(formFormatData.formData,'settlement',-1,100,0.01)" v-model.trim="formFormatData.formData.settlement">
                                <template slot="append">%</template>
                            </el-input>
                            <p class="form-help">结算抽成比例，例如费率是10%，那么商品卖出100元，商家得90元，平台得10元</p>
                        </el-form-item>
                        <el-form-item label="银行分类">
                            <el-select clearable v-model="formFormatData.formData.bank_id" class="mincheck" placeholder="请选择">
                                <el-option v-for="item in couponData" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="银行卡号">
                            <el-input placeholder="请输入银行卡号" @input.native="clearNativeReg(formFormatData.formData,'bank_num')" v-model.trim="formFormatData.formData.bank_num">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="持卡人姓名">
                            <el-input placeholder="请输入持卡人姓名" v-model.trim="formFormatData.formData.bank_name">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/merchant/managementMerchant', code: 1 }})" type="primary">保存</el-button>
        <router-link tag="span" to="/merchant/managementMerchant">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import ChooseFiles from '@/components/ChooseFiles/index'
import {
  businessEdit,
  businessGet,
  getBankList
} from '@/api/merchant'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'ManagementMerchantAdd',
  components: {
    ChooseFiles
  },
  computed: {
  },
  created() {
    getBankList().then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.couponData = msgData
    })
  },
  data() {
    var checkImg = (rule, value, callback) => {
      const val = this.formFormatData.formData[rule.bindKey]
      const { message } = rule
      if (!Array.isArray(val) || (Array.isArray(val) && val.length === 0)) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }
    return {
      couponData: [],
      tabset: {
        basic: true,
        conditions: false,
        commission: false
      },
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'logo',
          model: 'img',
          validateField: 'merchantlog'
        }
      },
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'bgimg',
          model: 'img',
          validateField: 'businessbackgroundmap'
        }
      },
      choosePlatformConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 5,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'quaimg',
          model: 'img'
          // validateField: 'businessqualification'
        }
      },
      formFormatData: {
        key: 'userForm',
        model: {
          noCreateEdit: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            api: businessGet,
            params: {
              id: ''
            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig', 'chooseBgConfig', 'choosePlatformConfig']
              }
            }
          },
          submitForm: businessEdit
        },
        formData: {
          name: '',
          describe: '',
          logo: [],
          bgimg: [],
          quaimg: [],
          contacts: '',
          telephone: '',
          wechat: '',
          address: '',
          settlement: '',
          bank_name: '',
          bank_num: '',
          bank_id: '',
          business_settlement: 1
        },
        rules: {
          name: [{
            required: true,
            message: '请输入商家名称',
            trigger: 'blur'
          }],
          describe: [{
            required: true,
            message: '请输入商家介绍',
            trigger: 'blur'
          }],
          merchantlog: [{
            required: true,
            bindKey: 'logo',
            message: '请上传商家LOGO~!',
            validator: checkImg,
            trigger: 'change'
          }],
          businessbackgroundmap: [{
            required: true,
            bindKey: 'bgimg',
            message: '请上传商家背景图~!',
            validator: checkImg,
            trigger: 'change'
          }]
          // businessqualification: [{
          //   required: true,
          //   bindKey: 'quaimg',
          //   message: '请上传商家资质~!',
          //   validator: checkImg,
          //   trigger: 'change'
          // }]
        }
      }
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      let i = 1
      for (const item of Object.keys(this.tabset)) {
        if (i === Number(key)) {
          this.tabset[item] = true
        } else {
          this.tabset[item] = false
        }
        i++
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.management-merchant-add {
    .logo {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
    }

}
</style>
